<template>
  <div id="loginDialog">
    <el-dialog title="登录" v-model="loginDialogVisible" :show-close="false" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" @submit.native.prevent="onSubmit">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="text-align: right;">
            <el-button class="login-button" :class="{error: loginError}" type="success" native-type="submit" :loading="loading">登录</el-button>
            <!--<el-button class="login-button" @click="closeDialog">取消</el-button>-->
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import http from '../api/http'
  export default {
    data () {
      return {
        title: '登录',
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [{
            required: true, message: '请输入用户名'
          }],
          password: [{
            required: true, message: '请输入密码'
          }]
        },
        loading: false,
        valid: false,
        loginError: false
      }
    },
    props: {
      loginDialogVisible: {
        type: Boolean,
        default: false
      }
    },
    computed: {
    },
    methods: {
      handleReset () {
        this.$refs.form.resetFields()
      },
      onSubmit() {
        var vm=this;
        vm.$refs.form.validate(valid => {
          if (valid) {
            vm.loading = true;
            setTimeout(function(){
              vm.loading=false;
            },3000);
            http.postData(vm,'/sys/account/signIn', vm.form,function(resp){
              var ret = resp.body;
              if (ret.code == '111') {
                vm.$notify({
                  title: '登录成功!',
                  message: '',
                  type: 'success'
                });
                //存储用户信息到本地
                vm.$store.dispatch('saveCurrentLoginInfo',ret.value).then(() => {
                  vm.closeDialog();
                });
              } else {
                vm.$notify.error({
                  title: '登录失败!',
                  message: ret.msg
                })
              }
              vm.loading = false;
            });
          }
        })
      }, closeDialog(){
        this.$parent.loginDialogVisible=false;
      }
    }, created() {
    }
  }
</script>
<style>
  #loginDialog .el-dialog{width:300px;}
  #loginDialog .el-input{min-width:100%;}
</style>
